<template>
  <div class="box">
    <div class="box-video">
    <video
        :src="Mp4"
        autoplay="autoplay"
        loop="loop"
        controls="controls"
        controlsList="nodownload"
        height="100%" width="100%">
    </video>
    </div>
    <div class="jz">
      <div class="iconfont">
      <van-icon name="cross" color="#fff" @click="go"/>
      <van-icon name="weapp-nav" color="#fff"/>
    </div>
    <div class="content-mp4">
      <h1>《 {{title}} 》</h1>
      <p>
        <span class="userna">{{artistName}}</span>
      </p>
      <p>
        <i>{{desc}}</i>
      </p>
      <p>
        <span>{{publishTime}}</span>
      </p>
    </div>
    <div class="content-shou">
      <ul>
        <li>
           <van-icon name="like-o" />
           <span>喜欢</span>
        </li>
        <li>
          <van-icon name="fire-o" />
          <span>火辣</span>
        </li>
        <li>
          <van-icon name="good-job-o" />
          <span>{{playCount}}</span>
        </li>
        <li>
        <van-icon name="share" />
        <span>转发</span>
        </li>
      </ul>
    </div>
    <div class="content-mv">
      <ul>
        <li v-for="item in mvdet" :key="item.id">
          <div class="mv">
            <img :src="item.cover" alt="">
            <van-icon name="play-circle-o" />
            <span>{{item.duration}}</span>
          </div>
          <div class="mv-right">
            <span>{{item.artistName}}</span>
            <p>{{item.name}}</p>
          </div>
        </li>
      </ul>
    </div>
    </div>
  </div>
</template>

<script>
import { Mvdetail, urlMv } from '@/api'
export default {
  name: '',
  data () {
    return {
      Mp4: {},
      title: '',
      artistName: '',
      desc: '',
      publishTime: '',
      playCount: '',
      mvdet: []
    }
  },
  mounted () {
    console.log('路由', this.$router)
    const { id } = this.$route.params
    Mvdetail({ mvid: id }).then(res => {
      // console.log('属性名：', Object.keys(res.data.data.brs)[0])
      this.Mp4 = res.data.data.brs[Object.keys(res.data.data.brs)[0]]
      this.title = res.data.data.name
      this.artistName = res.data.data.artistName
      this.desc = res.data.data.desc
      this.publishTime = res.data.data.publishTime
      this.playCount = res.data.data.playCount
    })
    urlMv({ mvid: id }).then(res => {
      this.mvdet = res.data.mvs
    })
  },
  methods: {
    go () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.jz{
  padding: 0 0.1rem;
}
.box{
  .box-video{
    height: 2.8rem;
    position: relative;
  }
  .iconfont{
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    .van-icon{
      margin-left: 0.15rem;
    }
  }
  .content-mp4{
    color: #fff;
    h1{
      margin-top: 0.1rem;
      font-weight: initial;
      color:#ffcd32;
    }
    .userna{
      line-height: 0.3rem;
      color: rgba(255, 255, 255, 0.37);
      font-size: 0.12rem;
      font-weight: initial;
      margin-left: 0.1rem;
      margin-top: -1rem;
    }
    i{
      font-size: 0.12rem;
      color: #cccccc;
    }
    span{
      font-size: 0.1rem;
      color: #eee;
    }
  }
  .content-shou{
    margin-top: 0.1rem;
    height: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    ul{
      width: 100%;
      display: flex;
      justify-content: space-around;
      li{
        display: flex;
        flex-direction: column;
        align-items: center;
        .van-icon{
          color: #ffcd32;
          font-size: 0.2rem;
          padding: 0.08rem;
        }
        span{
          color: rgba(238, 238, 238, 0.562);
          font-size: 0.12rem;
        }
      }
    }
  }
  .content-mv{
    margin-top: 0.15rem;
    ul{
      li{
        display: flex;
        margin-bottom: 0.1rem;
        .mv{
          margin-right: 0.1rem;
          position: relative;
          img{
            width: 1.5rem;
          }
          .van-icon{
            position: absolute;
            bottom: 0.05rem;
            left: 0.1rem;
            color: #fff;
          }
          span{
            position: absolute;
            bottom: 0.01rem;
            left: 0.3rem;
            color: #fff;
            font-size: 0.05rem;
          }
        }
        .mv-right{
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          span{
            font-size: 0.13rem;
            color: rgba(255, 255, 255, 0.616);
          }
          p{
            font-size: 0.1rem;
            color: rgba(204, 204, 204, 0.514);
          }
        }
      }
    }
  }
}

</style>
